<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      var geocoder;
     
      // Karte initialisieren mit festen Koordinaten als Mittelpunkt
      function initialize() {
            geocoder = new google.maps.Geocoder();
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(42.850033, -87.6500523);
            
			// Kartenoptionen
			var myOptions = {
              zoom: 10,
              navigationControl: true,
              mapTypeControl: true,
              scaleControl: true,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              center: chicago
            }
            
        
            
        // Funktion die einen Ort geocodiert und Ihn dann mittels
        // eines Markers in der Karte anzeigt
        function myGeocode(ort) {
			
        // Ort der Codiert werden soll
        var address = ort;
        
        if (geocoder) {
          geocoder.geocode( { 'address': address}, function(results, status) {
            
			// Geocodierung erfolgreich?
			if (status == google.maps.GeocoderStatus.OK) {
              
			  // Karte ausrichten
			  map.setCenter(results[0].geometry.location);
			  
			  // Marker setzen
              var marker = new google.maps.Marker({
                  map: map, 
                  position: results[0].geometry.location
              });
              
			  // InfoWindow setzen
              var infoWindow = new google.maps.InfoWindow({
                  content: "Wallhalben"
              });
              
                // Den Marker mit der Information verknüpfen
                google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
             });
            } 
          });
        }
      }
      
        // Eine Route zwischen zwei Orten berechnen
        function myRoute(start, ziel){
            var start = start;
            var end = ziel;
            var wayp = [];
            
            // Wegpunkte in die Route einfügen
            wayp.push({
              location:"Maxdorf",
              stopover:true
            });
            
            wayp.push({
              location:"Kaiserslautern",
              stopover:true
            });
            
            wayp.push({
              location:"Bad Sobernheim",
              stopover:true
            });
            
            wayp.push({
              location:"Mainz",
              stopover:true
            });
            
            wayp.push({
              location:"Osthofen",
              stopover:true
            });
            
            wayp.push({
              location:"Darmstadt",
              stopover:true
            });
            
            wayp.push({
              location:"Kirchheimbolanden",
              stopover:true
            });
            
            wayp.push({
              location:"Morbach",
              stopover:true
            });
            
    
            // Request an Google Maps absetzen
            var request = {
                origin:start, 
                destination:end,
                waypoints: wayp,
                provideRouteAlternatives: true,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
              
			  // Routenanfrage senden
              directionsService.route(request, function(result, status) {
                
				// Erfolgreich? --> Route anzeigen
				if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(result);
                }
              });
    
        }
                    
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    
            
    
             // Marker an einer bestimmten Position setzen
             var marker = new google.maps.Marker({
                position: chicago, 
                map: map, 
                title:"Hello World!"
             }); 
             
             // Marker mit einer Information versehen
             var infowindow = new google.maps.InfoWindow({
                    content: "Hier steht der Text des Informationsfensters"
             });
             
             // Den Marker mit der Information verknüpfen
             google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
             });
             
             // Route berechnen
             myRoute("Zweibrücken Missouristr", "Zweibrücken Amerikastr");
      }
     
      
    </script>
</head>

<body onload="initialize()">

    <!-- Platz für die Karte reservieren -->
    <div id="map_canvas" style="float:left;width:100%;height:100%;">
    
    </div>
    
    <div id="directionsPanel" style="float:right;width:0%;height 100%"></div>
    </div>
</body>

</html>
